/**
 *  学习目标：Todos 案例 
 *  需求1：✅渲染任务列表
    步骤：
      1. 在App组件中声明state = {list: [{}]}, 设计数据格式
      2. 父传子技术，将list传给Main
      3. Main组件通过map，生成多个li，填入对应内容

    需求2: ✅更新一条数据-设置选中状态、处理样式
    步骤：
      1. App组件中定义一个修改数据的方法： ，给子组件用
      2. 在 Main组件中，给多选按钮绑定一个onChange事件，通过 子传父技术 调用App中定义的方法
      3. 在handleUpdate，根据id，和checked属性，来调用this.setState({})
      4. 通过给class设置表达式，来模拟动态class

    需求3: ✅删除一条数据
    步骤：
      1. App中定义一个删除方法，handleDelete，给子组件使用
      2. 在Main中找到删除按钮，绑定onClick事件，调用handleDelete
      3. 删除的逻辑：通过id删除一条数据即可

    需求4: ✅Footer组件，点谁谁有边框
    步骤：
      1. 在App中state声明一个type，（状态提升）
      2. 通过父传子，将type传给Footer
      3. 在Footer中动态添加class
      4. 给按钮绑定onClick事件，通过子传父技术，修改App中的type


    需求5：✅Footer组件，点击切换显示数据
    步骤
      1. 在render函数中，根据list与type的值，定义showList变量， （类似Vue中的计算属性）
      2. 将showList传给Main组件的list属性

    需求6：✅ 清除已完成任务
    步骤
      1. App组件中定义一个方法: handleClear，清除已完成的任务
      2. 在Footer中给清除按钮，绑定一个onClick事件，通过子传父调用handleClear
      3. handleClear中编写清除的逻辑：this.setState()

      
    需求7: ✅ 统计剩余未完成任务
    步骤：
      1. 在App的render方法中，定义一个变量count，用来统计未完成的数量
      2. 通过父传子，传count给Footer组件
      3. Footer显示出props.count
    注意：💥在render方法中，通过state计算而来的变量，（类似Vue中的计算属性）

         
    需求8: ✅新增任务功能 - 完成新增功能
    注意：
      1. 按回车才新增数据
      2. 按esc，清除输入框内容
      3. 新增后清除输入框内容
      4. 如果数据为空，提示用户，且不添加数据
    步骤：
      1. Header声明一个state.task，
      2. Header成为受控组价：state.task绑定value，onChange监听value变化，setState更新task
      3. 使用onKeyUp监听回车事件，
      4. 通过子传父新增数据到list中
      细节完善
      1. 按esc，清除输入框内容
      2. 新增后，清除输入框内容
      3. 如果数据为空，提示用户，且不添加数据

    需求9：✅数据缓存功能
    需求10： 全选功能-小选影响全选
    需求11：✅ 全选功能-全选影响小选

    
   
 */
import React, { Component } from 'react';
import './styles/base.css';
import './styles/index.css';

export default class App extends React.Component {

    state = {
        type: JSON.parse(localStorage.getItem('type')) || "all",
        list: JSON.parse(localStorage.getItem('list')) || [{
            id: 1,
            task: '思聪',
            checked: true,
            edit: false
        },
        {
            id: 2,
            task: '思聪2',
            checked: false,
            edit: false
        },
        {
            id: 3,
            task: '思聪3',
            checked: true,
            edit: false
        }]
    }
    // 更新选中状态
    handleUPdate = (id) => {
        let newList = [...this.state.list]
        let index = newList.findIndex(item => item.id === id)
        newList[index].checked = !newList[index].checked
        this.setState({ list: newList })
    }
    // 删除
    handleDelete = (id) => {
        let list = this.state.list.filter(item => item.id !== id)
        this.setState({ list })
    }
    // 修改被选中的目标
    handleType = (type) => {
        console.log(type);
        this.setState({ type })
    }
    // 过滤需要显示的数据
    showList = () => {
        if (this.state.type === 'all') { return }
    }
    // 清空已完成
    clearCompleted = () => {
        const list = this.state.list.filter(item => item.checked !== true)
        this.setState({ list })

    }
    // 新增
    addList = (data) => {
        console.log(data);
        this.setState({
            list: [{
                id: Date.now(),
                task: data,
                checked: false,
                edit: false
            }, ...this.state.list]
        })
    }
    handleCheckAll = (isChecked) => {
        this.setState({
            list: this.state.list.map(item => {
                item.checked = isChecked
                return item
            })
        })
    }
    // 修改
    editList = (e, id) => {
        // console.log(e.target.value, id);
        const index = this.state.list.findIndex(item => item.id === id)
        const list = [...this.state.list]
        list[index].task = e.target.value
        this.setState({ list })
    }
    // 双击，修改栏显示
    doubleClick = (id) => {
        const index = this.state.list.findIndex(item => item.id === id)
        const list = [...this.state.list]
        list[index].edit = true
        this.setState({ list })
        // let hhh = document.querySelector('#' + list[index].task)
        setTimeout(() => {
            console.log(document.getElementById(list[index].task));
            document.getElementById(list[index].task).focus();
        }, 100)
        console.log(document.getElementById(list[index].task));
    }
    // 失焦
    inputBlur = (id) => {
        const index = this.state.list.findIndex(item => item.id === id)
        const list = [...this.state.list]
        list[index].edit = false
        this.setState({ list })
    }
    render() {
        const { list, type } = this.state
        // 根据情况，过滤要显示的数据
        const showList = list.filter(item => {
            // if (type === 'all') 
            if (type === 'active') return item.checked !== true
            if (type === 'completed') return item.checked === true
            return true
        })
        // 统计剩余未完成任务
        let count = list.filter(item => item.checked !== true).length
        return (
            <section className="todoapp">
                {/* 头部 */}
                <Header addList={this.addList} ></Header>
                {/* 主体 */}
                <Main inputBlur={this.inputBlur} doubleClick={this.doubleClick} editList={this.editList} handleCheckAll={this.handleCheckAll} list={showList} handleUPdate={this.handleUPdate} handleDelete={this.handleDelete}></Main>
                {/* 底部 */}
                <Footer count={count} type={type} handleType={this.handleType} clearCompleted={this.clearCompleted}></Footer>
            </section>
        );
    }
    //  监听state中list 和type变化，拿到更新后的值
    componentDidUpdate() {
        localStorage.setItem('list', JSON.stringify(this.state.list))
        localStorage.setItem('type', JSON.stringify(this.state.type))
    }
}

// 头部组件
export class Header extends Component {
    state = {
        task: ''
    }
    // 实时修改input里的内容
    handleChange = (e) => {
        this.setState({ task: e.target.value })
    }
    handleKeyUp = (e) => {
        // console.log(e);
        // 回车事件
        if (e.keyCode === 13) {
            // 安全判断
            if (!this.state.task.trim()) {
                alert('任务名不能为空');
                return;
            }
            this.props.addList(this.state.task)
            // 清空
            this.setState({ task: '' })
        }
        if (e.keyCode === 27) {
            // 清空
            this.setState({ task: '' })
        }
    }
    render() {
        const { task } = this.state
        return (
            <header className="header">
                <h1>todos</h1>
                <input value={task} onChange={this.handleChange} onKeyUp={this.handleKeyUp} className="new-todo" placeholder="需要做什么" autoFocus />
            </header>
        )
    }
}
// 主体组件
export class Main extends Component {
    doubleClick = () => {
        console.log('双击事件');

    }
    // editList = (e) => {
    //     console.log(e);
    // }
    render() {
        const { list, handleUPdate, handleDelete, handleCheckAll, editList, doubleClick, inputBlur } = this.props
        const isAll = list.length ? list.every((item) => item.checked) : false;
        return (
            <section className="main">

                <input id="toggle-all" className="toggle-all" type="checkbox" onChange={(e) => handleCheckAll(e.target.checked)} checked={isAll} />
                <label htmlFor="toggle-all">全选</label>
                <ul className="todo-list">
                    {!list.length === 0 ? (<div>暂无数据</div>) : (
                        list.map(item => {
                            return (
                                <li onDoubleClick={() => doubleClick(item.id)} className={item.checked ? "completed" : ''} key={item.id}>
                                    <div className="view">
                                        <input className="toggle" onChange={() => handleUPdate(item.id)} type="checkbox" checked={item.checked} />
                                        <label>{item.task}</label>
                                        <button className="destroy" onClick={() => handleDelete(item.id)}></button>
                                    </div>
                                    <input onBlur={() => inputBlur(item.id)} type="text" id={item.task} className={item.edit ? 'editList' : 'isShow'} onChange={(e) => editList(e, item.id)} value={item.task} />
                                </li>
                            )
                        })

                    )}
                    {/* 
                    <li className="">
                        <div className="view">
                            <input className="toggle" type="checkbox" />
                            <label>睡觉</label>
                            <button className="destroy"></button>
                        </div>
                    </li> */}
                </ul>
            </section >
        )
    }
}
// 底部组件
export class Footer extends Component {
    render() {
        const { handleType, type, clearCompleted, count } = this.props
        return (
            <footer className="footer">
                <span className="todo-count">
                    <strong>{count}</strong> 剩余
                </span>
                <ul className="filters">
                    <li >
                        <a className={type === 'all' ? "all selected" : 'all'} href="#/" onClick={() => handleType('all')}>
                            全部
                        </a>
                    </li>
                    <li>
                        <a className={type === 'active' ? "active selected" : 'active'} href="#/active" onClick={() => handleType('active')}>
                            未完成
                        </a>
                    </li>
                    <li>
                        <a className={type === 'completed' ? "completed selected" : 'completed'} href="#/completed" onClick={() => handleType('completed')}>
                            已完成
                        </a>
                    </li>
                </ul>
                <button className="clear-completed" onClick={clearCompleted}>清除已完成</button>
            </footer>
        )
    }
}